<script setup>
// 定义轮播图数据
const carouselItems = [
  {
    id: 1,
    title: '赛博朋克2077',
    imageUrl: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1091500/header.jpg',
    discount: '50% off'
  },
  {
    id: 2,
    title: '艾尔登法环',
    imageUrl: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1245620/header.jpg',
    discount: '30% off'
  },
  {
    id: 3,
    title: 'DOTA 2',
    imageUrl: 'https://cdn.cloudflare.steamstatic.com/steam/apps/570/header.jpg',
    discount: '免费游玩'
  },
  {
    id: 4,
    title: 'CS:GO',
    imageUrl: 'https://cdn.cloudflare.steamstatic.com/steam/apps/730/header.jpg',
    discount: '免费游玩'
  }
]





</script>

<template>
  <div class="steam-container">
    <h1 class="steam-title">Steam热门游戏</h1>

    <el-carousel
        indicator-position="outside"
        height="400px"
        :interval="5000"
        arrow="always"
    >
      <el-carousel-item v-for="item in carouselItems" :key="item.id">
        <div class="carousel-content">
          <img :src="item.imageUrl" :alt="item.title" class="game-image" />
          <div class="game-info">
            <h3>{{ item.title }}</h3>
            <div class="discount-tag">{{ item.discount }}</div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>





</template>

<style scoped lang="scss">
.steam-title {
  color: #00adee; /* Steam亮蓝色 */
  font-size: 32px;
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
  text-shadow:
      0 0 5px rgba(0, 173, 238, 0.5),
      0 0 10px rgba(0, 173, 238, 0.3);
}



.steam-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;

  h1 {
    color: #fff;
    font-size: 28px;
    margin-bottom: 20px;
    text-align: center;
  }
}

.el-carousel {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

  &:deep(.el-carousel__arrow) {
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;

    &:hover {
      background-color: rgba(0, 0, 0, 0.7);
    }
  }

  &:deep(.el-carousel__indicator) {
    padding: 12px 4px;

    .el-carousel__button {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.5);
    }

    &.is-active .el-carousel__button {
      background-color: #fff;
    }
  }
}

.carousel-content {
  position: relative;
  height: 100%;
  width: 100%;
}

.game-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;

  h3 {
    font-size: 24px;
    margin: 0 0 10px 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  }
}

.discount-tag {
  display: inline-block;
  padding: 5px 10px;
  background-color: #5ba32b;
  border-radius: 4px;
  font-weight: bold;
  font-size: 16px;
}






</style>